<template>
  <div class="mvIndex">
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="all">
          <ul>
            <li v-for="(item,i) in area" :key="i" @click="selectAr(item)" :class="{active:areaName == item}">
              {{item}}
            </li>
          </ul>

          <ul>
            <li v-for="(item,i) in type" :key="i" @click="selectTy(item)" :class="{active:typeName == item}">
              {{item}}
            </li>
          </ul>

          <div class="allMVs">
            <h1>全部MV</h1>
            <el-radio-group v-model="order" @change="selectOr" fill="RGB(100, 189, 255)">
              <el-radio-button label="上升最快"></el-radio-button>
              <el-radio-button label="最新"></el-radio-button>
              <el-radio-button label="最热"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "MVIndexs",
  data() {
    return {
      area: ["全部", "内地", "港台", "欧美", "日本"],
      type: ["全部", "官方版", "原生", "现场版", "网易出品"],

      areaName: "全部",
      typeName: "全部",
      order: "上升最快",
    }
  },
  created() {
    this.getMVAll();
  },
  methods: {
    selectAr(item) {
      if (this.areaName != item) {
        this.areaName = item;
        this.getMVAll();
      }
    },
    selectTy(item) {
      if (this.typeName != item) {
        this.typeName = item;
        this.getMVAll();
      }
    },
    selectOr(item) {
      if (this.order != item) {
        this.order = item;
        this.getMVAll();
      }
    },
    getMVAll() {
      this.$emit("getAllMVs", 20, 0, this.areaName, this.typeName, this.order);
    }
  },
}
</script>

<style scoped>
.mvIndex h1 {
  display: inline;
  margin-left: 40px;
}
.el-radio-group {
  position: absolute;
  right: 1.5%;
}
.all ul {
  list-style-type: none;
  clear: both;
  padding-bottom: 40px;
}
.all ul li {
  float: left;
  margin-left: 5px;
  cursor: pointer;
  padding: 5px 10px 5px 10px;
}
.all ul li:hover {
  color: RGB(64, 158, 255);
}
.active {
  color: RGB(255, 255, 255);
  background-color: RGB(100, 189, 255);
}
.allMVs {
  margin-top: 40px;
  padding: 20px 0 20px 0;
  background: RGB(246, 246, 246);
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.el-col div {
  margin-bottom: 0px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>